<section>
  <form [formGroup]="userForm" fuiForm labelFlex="1" inputFlex="4" addon (ngSubmit)="submit()">
    <fui-form-item label="Name">
      <fui-input
        name="name"
        [formControl]="userForm.controls['name']"
        [readonly]="userFormReadonly"
        required
      ></fui-input>
    </fui-form-item>
    <fui-form-item label="Email">
      <fui-input
        name="email"
        email
        [formControl]="userForm.controls['email']"
        [readonly]="userFormReadonly"
        required
      ></fui-input>
    </fui-form-item>
    <fui-form-item label="Set age max">
      <fui-input-number
        name="age"
        [formControl]="userForm.controls['ageMax']"
        [readonly]="userFormReadonly"
      ></fui-input-number>
    </fui-form-item>
    <fui-form-item label="Age">
      <fui-input-number
        name="age"
        [fuiMinValue]="0"
        [fuiMaxValue]="userForm.controls['ageMax'].value"
        type="number"
        [formControl]="userForm.controls['age']"
        [readonly]="userFormReadonly"
        required
      ></fui-input-number>
    </fui-form-item>
    <fui-form-item label="Hobbies">
      <fui-checkbox-group
        [formControl]="userForm.controls['hobbies']"
        [readonly]="userFormReadonly"
        required
      >
        <fui-checkbox-item value="read">Read</fui-checkbox-item>
        <fui-checkbox-item value="code">Code</fui-checkbox-item>
      </fui-checkbox-group>
    </fui-form-item>
    <fui-form-item label="Sex">
      <fui-radio-group
        name="sex"
        [formControl]="userForm.controls['sex']"
        [readonly]="userFormReadonly"
        required
      >
        <fui-radio-item value="male">Male</fui-radio-item>
        <fui-radio-item value="female">Female</fui-radio-item>
      </fui-radio-group>
    </fui-form-item>
    <fui-form-item label="Color">
      <fui-radio-group
        name="color"
        [formControl]="userForm.controls['color']"
        [readonly]="userFormReadonly"
        required
      >
        <fui-radio-item value="red">Red</fui-radio-item>
        <fui-radio-item value="blue">Blue</fui-radio-item>
      </fui-radio-group>
    </fui-form-item>
    <fui-form-item label="Company">
      <fui-select
        style="width:100px"
        placeholder="fui select example"
        [formControl]="userForm.controls['company']"
        [readonly]="userFormReadonly"
      >
        <fui-select-option
          *ngFor="let company of companies"
          [value]="company.name"
        >
          {{company.name | fuiDefault }}
        </fui-select-option>
      </fui-select>
    </fui-form-item>
    <fui-form-item label="Birth date">
      <fui-datepicker-input
        [datepicker]="picker1"
        placeholder="Date"
        [formControl]="userForm.controls['birthday']"
        [readonly]="userFormReadonly"
        required
      ></fui-datepicker-input>
      <fui-datepicker #picker1></fui-datepicker>
    </fui-form-item>
    <fui-form-item label="Description">
      <fui-textarea
        [formControl]="userForm.controls['description']"
        [readonly]="userFormReadonly"
      ></fui-textarea>
    </fui-form-item>
    <fui-form-item>
      <button fuiBtn="primary" [disabled]="userForm.invalid">Confirm</button>
      <button fuiBtn="primary" type="button" (click)="toggleUserFormDisable()">Toggle Disable</button>
      <button fuiBtn="primary" type="button" (click)="toggleUserFormReadonly()">Toggle Readonly</button>
    </fui-form-item>
  </form>
</section>
